/*
 * @Author: silas 
 * @Date: 2021-05-26 15:10:14 
 * @Last Modified by: silas
 * @Last Modified time: 2021-05-27 11:52:13
 */
<template>
    <div class="tobBtoC">
        <div>
            <el-form
                :inline="true"
                :model="form"
                label-width="60px"
                class="formList"
            >
                <el-form-item label="选择区域" style="width: 20%">
                    <dx-cascader :area_id.sync="form.areaId" />
                </el-form-item>
                <el-form-item label="账期" style="width: 20%" >
                    <el-date-picker
                        v-model="form.time"
                        type="month"
                        placeholder="选择账期"
                        value-format="yyyyMM"
                    ></el-date-picker>
                </el-form-item>
                <el-form-item label="渠道类型" style="width: 20%">
					<el-select v-model="form.types">
						<el-option v-for="(it, i) in types" :key="i" :label="it" :value="it"></el-option>
					</el-select>
                </el-form-item>
                <el-form-item  style="width: 38%">
                    <el-button
                        style="margin-left: 20px"
                        size="mini"
                        type="primary"
                        @click="handle_search"
                        >查询</el-button
                    >
                    <el-button size="mini" type="orange" @click="handle_export(0)">
                        导出当月
                    </el-button>
                    <el-button size="mini" type="orange" @click="handle_export(1)">
                        导出当年
                    </el-button>
                </el-form-item>
            </el-form>
        </div>
        <div class="remark">
            <span class="attention">收入口径:</span
            >本年新发展资产的码号收入
        </div>
        <div class="table-content clearfix">
            <p class="g-unit">单位: 元</p>
            <div class="content" style="margin-top: 0;">
                <div class="tableBox">
                    <el-table
						id="table"
                        v-loading="tableLoading"
                        :data="tableData"
                        style="width: 100%"
                        class="tableTh28"
                        border
                        stripe
                        ref="table"
                        :span-method="arraySpanMethod"
                    >
                        <el-table-column min-width="90" label="本地网" prop="areaName" />
                        <el-table-column min-width="110" label="渠道类型" prop="channelDeptName2014" />
                        <el-table-column min-width="110" label="总收入" prop="zyIncome" />
                        <el-table-column label="其中: 码号收入">
                            <el-table-column min-width="100" label="移动" prop="ydIncome" />
                            <el-table-column min-width="100" label="宽带" prop="kdIncome" />
                            <el-table-column min-width="100" label="itv" prop="itvIncome" />
                            <el-table-column min-width="100" label="固话" prop="ghIncome" />
                            <el-table-column min-width="100" label="智能组网" prop="znzwIncome" />
                            <el-table-column min-width="100" label="天翼看家" prop="tykjIncome" />
                            <el-table-column min-width="100" label="家庭云" prop="jtyIncome" />
                            <el-table-column min-width="100" label="挂机短信" prop="gjdxIncome" />
                            <el-table-column min-width="100" label="来电名片" prop="ldmpIncome" />
                            <el-table-column min-width="100" label="通讯助理" prop="txzlIncome" />
                            <el-table-column min-width="100" label="云盘" prop="ypIncome" />
                            <el-table-column min-width="100" label="其他" prop="otherIncome" />
                            <el-table-column min-width="100" label="合计" prop="mhIncome" />
                        </el-table-column>
                       
                    </el-table>
                </div>
            </div>
        </div>	
    </div>
</template>

<script>
import prefixAPI from "@/api/prefixAPI";
import { getCookie } from "@/common/js/cookie";
import { getSessionStorage } from "@/common/js/storage";
import { $budgetAPI } from "@/api";
import FileSaver from 'file-saver';
import XLSX from 'xlsx';
import { mergeSpan } from "@/utils/mixin";
const exportUrl = prefixAPI.pack;
export default {
    name: "incomeNumber",
    data() {
        return {
            form: {
                areaId: '',
				time: '',
                types: '全部',
            },
            tableData: [],
            tableLoading: false,
			types: ['全部', '电子渠道部门', '政企渠道部门', '实体渠道部门', '合计'],
            spanArr: '',
        };
    },
    mounted() {
		this.init();
	},
    methods: {
         arraySpanMethod({ row, column, rowIndex, columnIndex }) {
            if (columnIndex == 0) {
                return this.spanArr[rowIndex][columnIndex]
            }
        },
        async init() {
            let that = this;

            that.accountInfo = JSON.parse(getSessionStorage("accountInfo"));
            that.form.areaId = that.accountInfo.areaId;
            that.form.time = that.moment().subtract(1, "months").format("YYYYMM");
			that.getData();
        },
        getTypes() {
            $budgetAPI.getRecordTypeList({}, res=> {
                this.typeslist = res.content;
            })
        },
        getData() {
            var that = this, title;

            that.tableLoading = true;
            $budgetAPI.getChannelMhData(
                {
                    areaId: that.form.areaId,
                    acctMonth: that.form.time,
                    channelType: that.form.types == '全部' ? '' : that.form.types 
                },
                (res) => {
					that.tableData = [];
                    var data = [];
                    if (res && res.code == 0) {
                        res.content.map(it => {
                            it.dataList.map((item, i) => {
                                item['areaName'] = it.areaName
                            })
                            data = [...data, ...it.dataList];
                            
                        })
                        this.spanArr = mergeSpan(data, ["areaName"]);
                        that.tableData = data;
                    }
                    that.tableLoading = false;
                }
            );
        },
        handle_search() {
			// if(!this.form.time || !this.form.fcDate) {
			// 	this.$message.error("请选择账期和版本");
			// 	return false
			// }
            this.getData();
        },
		handle_time(val) {
			this.form.time = val;
			this.form.fcDate = '';
			this.getFC(val);
		},
		handle_export(type) {
			 var areaId = this.form.areaId,
                 month = this.form.time, 
                 channelType = this.form.types == '全部' ? '' : this.form.types,
                 token = getCookie("token");
            if (type == 0) {
                window.open(`${exportUrl}/channelMh/exporChannelMhData?areaId=${areaId}&acctMonth=${month}&channelType=${channelType}&token=${token}`, "_self");
            } else {
                window.open(`${exportUrl}/channelMh/exporChannelMhYearData?areaId=${areaId}&acctMonth=${month}&channelType=${channelType}&token=${token}`, "_self");
            }
		},
        handle_del(row) {
            var that = this;

            that.$confirm("是否删除?", "提示", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning",
            }).then(() => {
                $budgetAPI.getDeleteRecord(
                    {
                        recordId: row.recordId,
                        token: getCookie("token"),
                    },
                    (res) => {
                        if (res.code == 0) {
                            this.$message({
                                type: "success",
                                message: "删除成功!",
                            });
                        } else {
                            this.$message({
                                type: "error",
                                message: res.message,
                            });
                        }
                        that.getData();
                    }
                );
            });
        },
		handle_down() {
            var token = getCookie("token");

            window.location.href =
                prefixAPI.hp +
                "/api/incomeEstimateImport/downTemplate?&token=" +
                token;
        },
        // 批量导入上传文件传递数据
        changeFile(file, fileList) {
            this.fileList = fileList;
            this.param = new FormData();
            this.param.append("file", file.raw);
        },
        // 导入
        handle_import(type) {
            var that = this;

            that.$refs["importForm"].validate((valid) => {
                if (valid) {
                    if (that.fileList.length == 0) {
                        that.$message({
                            message: "请选择需要上传的文件",
                            type: "warning",
                        });
                        return false;
                    }
                    that.param.append(
                        "version",
                        that.importForm.version
                    );
                    that.param.append("token", getCookie("token"));
                    that.param.append("acctMonth", that.importForm.year);
                    that.param.append("typeId", that.importForm.typeId);
                    $budgetAPI.importIncomeEstimateData(
                        that.param,
                        (res) => {
                            if (res.code == 0) {
                                that.$message({
                                    message: "导入成功",
                                    type: "success",
                                });
                                that.getData();
                            } else {
                                that.$message.error(res.message);
                            }
                            that.dialogVisible = false;
                        },
                        (err) => {
                            that.dialogVisible = false;
                        }
                    );
                } else {
                    console.log("error submit!!");
                    return false;
                }
            });
        },
        mergeTitles(data, type) {
            let tempArr = [];
            let afterData = [];
            for (let i = 0; i < data.length; i++) {
                if (tempArr.indexOf(data[i][type]) === -1) {
                afterData.push({
                    label: data[i][type],
                    horizonIndexId: data[i].horizonIndexId,
                    origin: [data[i]]
                });
                tempArr.push(data[i][type]);
            } else {
                    for (let j = 0; j < afterData.length; j++) {
                        if (afterData[j].label == data[i][type]) {
                            afterData[j].origin.push(data[i]);
                            break;
                        }
                    }
                }    
            }
            return afterData;
        },
        
		// hanlde_version(val) {
		// 	this.form.fcDate = val;
		// 	this.getData();
		// }
    },
};
</script>

<style lang="scss" scoped>
.remark {
    padding-top: 5px;
    text-align: left;
    .attention {
        font-weight: bold;
    }
}
.table-content {
    .table-header {
        display: flex;
        justify-content: space-between;
        .table-title {
            font-size: 14px;
            font-weight: bold;
            height: 30px;
            line-height: 30px;
            span {
                display: inline-block;
                width: 5px;
                height: 5px;
                background-color: #418ee9;
                border-radius: 1000%;
                overflow: hidden;
                margin-right: 10px;
                margin-bottom: 3px;
            }
        }
    }
    .content {
        margin-top: 15px;
    }
}
</style>
